<template>
  <div class="home">
    <header>
      <p>昵称:{{$store.state.userinfo.username}}</p>
      <p class="p1">许愿墙</p>
    </header>
    <section>
      <!-- input组件 -->
      <Inp @addxy="btn" :color="color"></Inp>
      <!-- 圈圈 -->
      <ul>
        <li @click="addDiv('aqua')"></li>
        <li @click="addDiv('red')"></li>
        <li @click="addDiv('green')"></li>
        <li @click="addDiv('gray')"></li>
        <li @click="addDiv('olive')"></li>
      </ul>
      <div v-for="(item,key) in $store.state.arr" :key="key" id="box">
        <!--缩放功能主要是缩放VueDrangResize标签 -->
        <VueDragResize :w="100" :h="100" v-on:resizing="resize" v-on:dragging="resize">
          <!-- 将这个div的宽高动态设置==VueDrangResize的宽高，这样可实时完成缩放 -->
          <div
            class="box"
            :style="{width: + vw+ 'px',height:+vh+'px',background:item.color}"
          >{{item.title}}</div>
          <!-- 点击删除 -->
          <van-button @click.native="del(key)" class="sc">X</van-button>
        </VueDragResize>
      </div>
    </section>
  </div>
</template>

<script>
import VueDragResize from "vue-drag-resize";
import Inp from "@/components/Inp.vue";
export default {
  name: "Home",
  components: { Inp, VueDragResize },
  data() {
    return {
      color: "",
      vw: 0,
      vh: 0,
      top: 0,
      left: 0
      // arr: []
    };
  },
  created() {
    this.vw = 200 + "px";
    this.vh = 200 + "px";
  },
  methods: {
    // 点击生成div
    btn(val) {
      this.$store.commit("boxdiv", { color: this.color, title: val });
      console.log(val);
      console.log(this.color);
    },
    //点击更换颜色
    addDiv(backgrounds) {
      this.color = backgrounds;
    },
    // 初始化渲染。
    //缩小
    resize(newRect) {
      this.vw = newRect.width;
      this.vh = newRect.height;
      this.top = newRect.top;
      this.left = newRect.left;
    },
    // 点击删除
    del(k) {
      alert(k);
      // this.arr.splice(k, 1);
    }
  }
};
</script>
<style lang="scss">
header {
  height: 50px;
  background-color: aquamarine;
  display: flex;
  align-items: center;
  .p1 {
    margin-left: 85px;
  }
}
#box {
  position: relative;
}
.sc {
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 10px;
}
ul {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
  li {
    width: 17%;
    height: 60px;
    border-radius: 50%;
  }
  li:nth-child(1) {
    background-color: aqua;
  }
  li:nth-child(2) {
    background-color: red;
  }
  li:nth-child(3) {
    background-color: green;
  }
  li:nth-child(4) {
    background-color: gray;
  }
  li:nth-child(5) {
    background-color: olive;
  }
}
</style>
